<template>
    <el-dialog
        v-model="isShow"
        :align-center="true"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        :title="formType === 'add' ? `添加【${currentDictType?.name}】字典数据` : `编辑【${currentDictType?.name}】字典数据`"
        class="dialog-box"
        @close="onCloseDialog"
    >
        <el-scrollbar max-height="450px">
            <el-form label-width="100" ref="formRef" :model="dictForm" :rules="rules">
                <el-form-item prop="name" label="字典名">
                    <el-input v-model="dictForm.name" placeholder="请输入字典名" clearable></el-input>
                </el-form-item>
                <el-form-item prop="code" label="编码">
                    <el-input v-model="dictForm.code" placeholder="请输入编码" clearable></el-input>
                </el-form-item>
                <el-form-item prop="value" label="字典值">
                    <el-input v-model="dictForm.value" placeholder="请输入字典值" clearable></el-input>
                </el-form-item>
                <el-form-item prop="description" label="描述">
                    <el-input type="textarea" v-model="dictForm.description" placeholder="请输入描述"></el-input>
                </el-form-item>
                <el-form-item prop="sort" label="排序">
                    <el-input-number v-model="dictForm.sort" :min="1" />
                </el-form-item>

                <el-form-item label="是否启用">
                    <el-switch v-model="dictForm.isEnabled" />
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <el-button @click="onCancel">取消</el-button>
            <el-button @click="onConfirm" type="primary">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="tsx">
import { DictType, DictValueForm } from '@/api/system/dict/types'
import { FormInstance, FormRules } from 'element-plus'
interface Props {
    currentDictType: DictType
}
const props = defineProps<Props>()
const emit = defineEmits<{ onTableAction: [action: TableActionType, params: any] }>()
// 是否显示dialog
const isShow = ref(false)
// 表单实例 Ref
const formRef = ref<FormInstance>()
// 表单类型
const formType = ref<FormType>('add')
// 表单初始数据
const initform: Partial<DictValueForm> = {
    id: undefined,
    name: '',
    code: '',
    value: '',
    dictTypeId: 0,
    sort: 1,
    description: '',
    isEnabled: true,
}
// 表单数据
const dictForm = reactive<Partial<DictValueForm>>({ ...initform })
// 表单校验规则
const rules = reactive<FormRules<DictValueForm>>({
    name: [
        {
            type: 'string',
            required: true,
            message: '字典名称不能为空',
            trigger: 'change',
        },
    ],
    code: [
        {
            type: 'string',
            required: true,
            message: '字典编码不能为空',
            trigger: 'change',
        },
    ],
    value: [
        {
            type: 'string',
            required: true,
            message: '字典值不能为空',
            trigger: 'change',
        },
    ],
})
// 打开dialog
const onOpenDialog = (action: FormType, row?: DictValueForm) => {
    formType.value = action
    if (action !== 'add' && row) {
        Object.assign(dictForm, row)
    } else if (action === 'add') {
        Object.assign(dictForm, initform)
    }
    isShow.value = true
}
// 关闭dialog
const onCloseDialog = () => {
    isShow.value = false
}
// 取消
const onCancel = () => onCloseDialog()
// 完成确认
const onConfirm = async () => {
    await formRef.value?.validate()

    if (props.currentDictType && props.currentDictType.id !== 0) {
        dictForm.dictTypeId = props.currentDictType.id
        emit('onTableAction', 'addOrEditSubmit', dictForm)
    }
}
defineExpose({
    onOpenDialog,
    onCloseDialog,
})
</script>

<style lang="scss" scoped></style>
